<template>
    <div id="app" class="bg">
        <Meta pagealias="freelanceresumelist" />
        <Head>人才信息</Head>
        <div class="searchdiv" @click="toggleSearch">
            <img src="../../assets/freelance/images/resumelist_03.png"/>
            <span :class="params.keyword ? 'isnull' : ''">{{ params.keyword ? params.keyword : "请输入关键字"}}</span>
        </div>
        <van-popup
        v-model="show"
        position="top"
        :overlay="true"
        :style="{ height: '90%', width: '100%' }"
        >
            <TopSearch
                type="lgresume"
                @hideSearch="toggleSearch"
                @doSearch="doSearchByKeyword"
            ></TopSearch>
        </van-popup>
        <van-list class="list"
         v-if="list.length>0"
         v-model="loading"
         :finished="finished"
         :finished-text="finished_text"
         @load="onLoad"
         :immediate-check="true" >
            <div class="item" v-for="(item,index) in list" :key="index" @click="resdetails(item.resume_id)">
                <div class="info clearfix">
                    <div class="sny">
                        <div class="name">
                            <div class="namecen">{{item.name}}</div>
                            <img v-if="item.is_top!=0" src="../../assets/freelance/images/resumelist_10.png"/>
                        </div>
                        <div class="postion">{{item.professional_title}}</div>
                    </div>
                    <img :src="item.avatar_img"/>
                </div>
                <div class="skill">
                    <div class="namelist">
                        <div class="name" v-for="(t,k) in item.skills" :key="k">{{t.custom_name?t.custom_name:t.title}}</div>
                    </div>
                    <div class="gradient"></div>
                    <div class="num">等{{item.skills.length}}个技能</div>
                </div>
                <div class="service">服务：
                    <span class="name" v-for="(t,k) in item.services" :key="k">{{t.title}}、</span>
                </div>
            </div>
        </van-list>
        <Datanull class="null" v-else></Datanull>
        <Foodmenu></Foodmenu>
    </div>
</template>
<script>
import { obj2Param } from '@/utils/index'
import Foodmenu from '@/components/freelance/Foodmenu'
import Datanull from '@/components/freelance/datanull'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
    Foodmenu,
    Datanull
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      show: false,
      page: 1,
      pagesize: 15,
      params: {
        keyword: ''
      },
      list: []
    }
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (to.name === 'freelanceresume') {
        // 将地址栏中的url参数初始化到参数对象中
        this.initQuery(to.query)
        this.fetchData(true)
      }
    }
  },
  created () {
    this.initQuery(this.$route.query)
    this.fetchData(true)
  },
  methods: {
    initQuery (query) {
      for (const key in this.params) {
        if (query.hasOwnProperty(key)) {
          this.params[key] = query[key]
        } else {
          this.params[key] = ''
        }
      }
    },
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 关键词搜索函数，重置所有参数，并且把当前页设置为第一页
    doSearchByKeyword (data) {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keyword = data.keyword
      this.page = 1
      this.$router.push('/freelance/resume' + obj2Param(this.params, '?'))
    },
    toggleSearch () {
      this.show = !this.show
    },
    resdetails (id) {
      this.$router.push('/freelance/resume/' + id)
    },
    fetchData (init) {
      let conditions = {
        key: this.params.keyword
      }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.resume_list, conditions)
        .then(res => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }
          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            }
          }
        }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.bg{
    width: 100vw;
    height: 100vh;
    // background-image: linear-gradient(to bottom, #f5fafe , #ffffff);
    .searchdiv{
        height: 36px;
        margin: 17px 21px 0px 21px;
        border-radius: 50px;
        border: 1px solid #d0d0d0;
        display: flex;
        align-items: center;
        img{
            margin-left: 11px;
            margin-right: 8px;
            width: 14px;
            height: 14px;
        }
        span{
            color: #b4bdc9;
            font-size: 15px;
            &.isnull{
                color: #333333;
            }
        }
    }
    .list,.null{
        height: calc(100vh - 60px - 50px - 55px);
        margin: 10px 21px 0px 21px;
        overflow: auto;
        .item{
            border-bottom: 1px solid #ecedf2;
            padding-top: 15px;
            padding-bottom: 15px;
            .info{
                .sny{
                    float: left;
                    .name{
                        display: flex;
                        align-items: center;
                        position: relative;
                        .namecen{
                            line-height: 1;
                            max-width: calc(100vw - 42px - 65px - 21px);
                            font-size: 18px;
                            color: #333333;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        img{
                            margin-left: 6px;
                            width: 15px;
                            height: 15px;
                        }
                    }
                    .postion{
                        line-height: 1;
                        max-width: calc(100vw - 42px - 65px);
                        margin-top: 15px;
                        font-size: 17px;
                        color: #ff4e00;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                img{
                    float: right;
                    width: 52px;
                    height: 52px;
                }
            }
            .skill{
                margin-top: 15px;
                display: flex;
                align-items: center;
                position: relative;
                .namelist{
                    height: 25px;
                    max-width: calc(100vw - 42px - 80px);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                    .name:nth-child(odd){
                        font-size: 11px;
                        margin-right: 8px;
                        border-radius: 5px;
                        padding: 3px 6px 3px 6px;
                        border: 1px solid #38c965;
                        background-color: #f6fcf8;
                        color: #38c965;
                    }
                    .name:nth-child(even){
                        font-size: 11px;
                        margin-right: 8px;
                        border-radius: 5px;
                        padding: 3px 6px 3px 6px;
                        border: 1px solid #4f81f3;
                        background-color: #f0f4fd;
                        color: #4f81f3;
                    }
                }
                .gradient{
                    position: absolute;
                    height: 25px;
                    width: 70px;
                    right: 80px;
                    background-image: linear-gradient(to right, rgba(255, 255, 255,0),rgb(255, 255, 255));
                    z-index: 1;
                }
                .num{
                    float: left;
                    margin-left: 5px;
                    font-size: 13px;
                    color: #0f2948;
                    z-index: 2;
                }
            }
            .service{
                line-height: 1;
                margin-top: 15px;
                font-size: 15px;
                color: #555555;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .list::-webkit-scrollbar{
        display: none;
    }
}
</style>
